<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>谁是卧底</title>
    <link href="bootstrap.css" rel="stylesheet">
    <script src="vue.js"></script>
    <style>
        body {
            background: black;
        }

        .container-fluid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        p {
            text-align: center;
            color: white;
            margin-top: 30px;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="container-fluid d-flex justify-content-center align-items-center">
        <div>
            <div v-if='!start' class="d-flex justify-content-center">
                <button class="btn btn-primary mb-3" @click="startGame">开始一场新游戏~</button>
            </div>

            <div v-else class="start">
                <button class="btn btn-success" @click="get">你的词条~</button>
                <button class="btn btn-danger" @click="closeGame">谁是卧底~</button>
            </div>

            <div class="info">
                <p>{{ info }}</p>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '.container-fluid',
            data: {
                start: false,
                data: [
                    { player: '女性朋友', undercover: '女朋友' },
                    { player: '胖子',    undercover: '肥肉' },
                    { player: '状元',    undercover: '冠军' },
                    { player: '高跟鞋',  undercover: '增高鞋' },
                    { player: '汉堡包',  undercover: '肉夹馍' },
                    { player: '蜘蛛侠',  undercover: '蜘蛛精' },
                    { player: '卧底',    undercover: '内奸' },
                    { player: '太监',    undercover: '人妖' },
                    { player: '公交',    undercover: '地铁' },
                    { player: '魔术师',  undercover: '魔法师' },
                    { player: '男朋友',  undercover: '前男友' },
                    { player: '辣椒',    undercover: '芥末' },
                    { player: '手机',    undercover: '座机' },
                    { player: '纸巾',    undercover: '湿巾' },
                    { player: '风扇',    undercover: '空调'},
                    { player: '保安',    undercover: '保镖'},
                    { player: '元宝',    undercover: '铜钱'},
                    { player: '和尚',    undercover: '道士'},
                    { player: '镜子',    undercover: '玻璃'},
                    { player: '面包',    undercover: '蛋糕'},
                    { player: '警察',    undercover: '捕快'},
                    { player: '情人节',    undercover: '光棍节'},
                    { player: '富二代',    undercover: '高富帅'},
                    { player: '洗衣粉',    undercover: '肥皂'},
                    { player: '泡泡糖',    undercover: '棒棒糖'},
                    { player: '牛肉干',    undercover: '猪肉脯'},
                    { player: '唇膏',    undercover: '口红'},
                    { player: '浴缸',    undercover: '鱼缸'},
                    { player: '电动车',    undercover: '摩托车'},
                    { player: '眉毛',    undercover: '睫毛'},
                    { player: '筷子',    undercover: '竹签'},
                    { player: '麻雀',    undercover: '乌鸦'},
                    { player: '火车',    undercover: '高铁'},
                    { player: '铅笔袋',    undercover: '铅笔盒'},
                    { player: '脸盆',    undercover: '水桶'},
                    { player: '加多宝',    undercover: '王老吉'},
                    { player: '古筝',    undercover: '吉他'},
                    { player: '作文',    undercover: '论文'},
                    { player: '铁观音',    undercover: '碧螺春'},
                    { player: '同学',    undercover: '同桌'},
                    { player: '牛奶',    undercover: '豆浆'},
                    { player: '羽毛球',    undercover: '网球'},
                    { player: '基友',    undercover: '蕾丝'},
                    { player: '浴缸',    undercover: '鱼缸'},
                ],
                info: '',
                number: 0,
                undercover: [],
                gameData: {},
                underNum: 0
            },
            methods: {
                get(){
                    if( this.number <= 0 ) {
                        alert('到达最大玩家数量');
                        return false;
                    }
                    this.number--;
                    let flag = true;
                    this.undercover.map(item => {
                        if( item == this.number ) flag = false;
                    })

                    flag ? this.input(this.gameData.player) : this.input(this.gameData.undercover);
                },
                input(a){
                    this.info = a;
                    setTimeout(() => {
                        this.info = ''
                    }, 1500);
                },
                startGame(){
                    this.number = prompt('玩家数量');
                    this.underNum = prompt('卧底数量');
                    this.start = true;
                    this.undercover = new Array(parseInt(this.number)).fill(1).map((a, i) => i).sort(() => Math.random() - 0.4).slice(0, parseInt(this.underNum));
                    var index = Math.floor(Math.random() * this.data.length);
                    this.gameData = this.data[index];
                    this.data.splice(index, 1);
                    console.log(index);
                },
                closeGame(){
                    this.start = false;
                    this.input(this.gameData.undercover);
                }
            }
        })
    </script>
</body>

</html>